import Vue from 'vue'

const component2 = {
  template: `<div>
{{yy.value}}
<input type="text" v-model="value">
</div>`,
  inject: [
    'yy'
  ],
  data () {
    return {
      value: '123aaa'
    }
  },
  watch: {
    value () {
      console.log(arguments[0])
    }
  },
  mounted () {
    console.log('component2', this.$parent.$data)
  }
}

const component1 = {
  components: {
    component2
  },
  data () {
    return {
      value: 'abc'
    }
  },
  template: `<div><component2></component2></div>`,
  watch: {
    value () {
      console.log('value', this.value)
    }
  },
  mounted () {
    this.$children[0].$data.value = "123abc"
  }

}

new Vue({
  components: {
    component1
  },
  provide () {
    return {
      yy: this
    }
  },
  data () {
    return {
      value: 123
    }
  },
  template: `<div><component1></component1></div>`,
  el: '#app',
  watch: {
    value () {
      console.log('value123', this.value)
    }
  }

})
